<template>
  <van-icon :color="iconColor()" :name="iconName()" @click="doClick" />
</template>

<script>
// 导入 api
import { addLike, deleteLike } from '@/api/article.js'

export default {
  name: 'collectArticle',
  props: {
    // 收藏状态
    value: {
      type: Number,
      required: true
    },
    // 被收藏的文章id
    aid: {
      type: [Number, String],
      required: true
    }
  },
  methods: {
    // 1.点击按钮方法------------------------
    async doClick() {
      // a.显示提示
      this.$toast.loading({
        message: '操作中...',
        forbidClick: true
      })
      try {
        if (this.value <= 0) {
          // 点赞操作
          await addLike(this.aid)
          // 修改 父组件 上
          this.$emit('input', 1)
        } else {
          // 取消点赞操作
          await deleteLike(this.aid)
          // 修改 父组件 上
          this.$emit('input', -1)
        }
        this.$toast.success('操作成功~: )')
      } catch (err) {
        this.$toast.fail('操作失败~: {')
      }
    },
    // 2.根据状态 返回 图标名字---------------
    iconName() {
      if (this.value === 0) {
        // 不喜欢
        return 'arrow-down'
      } else if (this.value === -1) {
        // 无态度
        return 'good-job-o'
      } else {
        // 赞
        return 'good-job'
      }
    },
    // 3.根据状态 返回 图标颜色---------------
    iconColor() {
      if (this.value === 0) {
        // 不喜欢
        return 'green'
      } else if (this.value === -1) {
        // 无态度
        return '#777'
      } else {
        // 赞
        return 'red'
      }
    }
  }
}
</script>

<style lang="less" scoped>
</style>
